<template>
  <div class="w-100" style="height: 100%">
    <div
      id="qsdwgdcdtj"
      class="w-100"
      style="height: 100%; position: relative"
    ></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
const props = defineProps({

  trafficWay:{
    type:Array,
    default:()=>[]
  }
});

const calcsum = (data:Array<any>) => {
  let sum = 0;
  data.forEach((item) => {
    sum = sum + item.value;
  });
  return sum;
};

let data = [];
let data1 = [];
let color = ["#83F9F8", "#83F9F8", "#027AD0", "#027AD0"];
let color1 = ["#83F9F899", "#83F9F899", "#027AD099", "#027AD099"];
for (var i = 0; i < props.trafficWay.length; i++) {
  data.push(
    {
      value:  (props.trafficWay[i] as any).value,
      name:  (props.trafficWay[i] as any).name,
      itemStyle: {
        normal: {
          label: {
            show: true, //false不显示饼图上的标签
            position: "outside", //inside（在饼图上显示）,outside(默认就会出现引导线) center
            formatter: "{b}:{c}",
          },
          //只有设置了label:show=ture;position=outside 设置labelLine才会有效
          labelLine: {
            show: true, //显示引导线
            length: 500, //连接饼图第1段线条的长度 length length2 不写自适应
            length2: 300, //链接饼图第2段线条长度
            smooth: false, //是否光滑连接线
          },
        },
      },
    },
    {
      value: 3,
      name: "",
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      },
    }
  );
  data1.push(
    {
      value:  (props.trafficWay[i] as any).value,
      name: (props.trafficWay[i] as any).name,
      itemStyle: {
        normal: {
          label: {
            show: false, 
          },
          //只有设置了label:show=ture;position=outside 设置labelLine才会有效
          labelLine: {
            show: false, //显示引导线
          },
        },
      },
    },
    {
      value: 3,
      name: "",
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      },
    }
  );
}
let seriesOption = [
  {
    name: "",
    type: "pie",
    clockWise: false,
    radius: ["75%", "80%"],
    hoverAnimation: false,
    center: ["50%", "50%"],
    itemStyle: {
      normal: {
        opacity: 1,
        label: {
          position: "outside",
          alignTo: "edge",
          margin: 1,
          formatter: function (params: any) {
            if (params.name !== "") {
              return "{b|" + params.name + "}\n{d|" + params.value + "} ";
            } else {
              return "";
            }
          },
          rich: {
            b: {
              fontSize: 14,
              color: "rgba(255, 255, 255,.6)",
              align: "left",
              padding: 4,
            },
            d: {
              fontSize: 22,
              color: "rgba(0, 255, 253, 1)",
              align: "left",
              marginTop: -100,
              padding: 4,
            },
          },
        },
        labelLine: {
          normal: {
            length: 10,
            length2: 5,
            lineStyle: {
              width: 1,
            },
          },
        },
      },
    },

    data: data,
  },
  {
    name: "",
    type: "pie",
    clockWise: false,
    radius: ["40%", "65%"],
    hoverAnimation: false,
    center: ["50%", "50%"],
    itemStyle: {
      normal: {
        opacity: 0.56,
        label: {
          show: false,
        },
      },
    },
    data: data1,
  },
];
let option = {
  color: color,
  grid: {
    left: "%",
    right: "1%",
    bottom: '80px',
    top: "1%",
  },
  tooltip: {
    show: false,
  },
  toolbox: {
    show: false,
  },
  title: {
    text: "管线总长度/m",
    left: "center",
    top: "55%",
    textStyle: {
      color: "#fff",
      fontSize: 20,
      align: "center",
    },
  },

  graphic: {
    type: "text",
    left: "center",
    top: "40%",
    style: {
      text: "0",
      textAlign: "center",
      fill: "#fff",
      fontSize: 29,
      fontWeight: 700,
    },
  },

  series: seriesOption,
};

onMounted(() => {


  option.graphic.style.text = calcsum(props.trafficWay).toString();
  let myChart = echarts.init(
    document.getElementById("qsdwgdcdtj") as HTMLElement
  );

  myChart.setOption(option);
});
</script>

<style></style>
